<template>
	<div class="content">
		<AplidForm ref="formRef" v-bind="FormConfig" v-model="formModel" @reset="onReset" @submit="onSubmit">
			<template v-slot:serviceOrgForm>
				<div>
					<div class="flex align-center" v-if="nowRowData.isOperate == 1">
						<p class="node-label mr8">请选择关联数据</p>
						<el-button type="primary" size="small" @click="handleOpenSelect">刷选器</el-button>
					</div>
					<div class="mt10">
						<el-space wrap v-loading="loading">
							<el-tag v-for="tag in orgList" :key="tag.label" class="mx-1" closable type="info" @close="handleClose(tag)">
								{{ tag.label }}
							</el-tag>
						</el-space>
					</div>
				</div>
			</template>
		</AplidForm>

		<el-drawer v-model="drawer" :with-header="false" size="70%" :modal="false" append-to-body>
			<el-page-header @back="drawer = !drawer">
				<template #content>
					<span class="text-large font-600 mr-3"> 勾选需要的选项 </span>
				</template>
			</el-page-header>
			<AssociateCheck v-if="drawer" @change="onSelectCheck" :list="orgList"></AssociateCheck>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import serviceOrg from './ServiceOrg/index.vue'
import AssociateCheck from './AssociateCheck.vue'

import apiMod from '@/apiMod'
import { ElLoading, ElMessage } from 'element-plus'

type Props = {
	nowRowData?: any
}
const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['refresh'])
const formRef = ref(null)
const FormConfig = {
	inline: false,
	showBtn: true,
	labelPosition: 'left',
	column: [
		{
			type: 'DividerHtml',
			modelValue: '当前养老行业服务商',
			span: 24,
		},
		{
			prop: 'serviceProviderName',
			disabled: true,
			span: 24,
		},
		{
			prop: 'serviceOrg',
			span: 24,
		},
	],
}
const drawer = ref(false)
const loading = ref(false)
const formModel = ref({
	id: props.nowRowData.id,
	creditCode: props.nowRowData.creditCode,
	serviceProviderName: props.nowRowData.providerName,
})
const orgList = ref([])
let beforeData = []

const getInitData = () => {
	apiMod
		.view_getBindOrganization({
			creditCode: props.nowRowData.creditCode,
		})
		.then((res) => {
			const typeStr = {
				1: 'creditCode',
				2: 'soleValue',
				3: 'uniqueValue',
			}
			orgList.value = res.data.map((item) => {
				return {
					label: item.organizationName,
					value: item.id,
					type: typeStr[item.type],
				}
			})
		})
}
const onReset = () => {
	emit('refresh')
}
const handleOpenSelect = () => {
	drawer.value = true
}
const save = (query: any, back?: boolean) => {
	loading.value = true
	apiMod
		.view_dpServiceProvider_bind_org(query)
		.then(() => {
			loading.value = false
			ElMessage.success('操作成功')
			if (back) {
				onReset()
			} else {
				getInitData()
			}
		})
		.catch(() => {
			loading.value = false
		})
}

const handleClose = (tag) => {
	let query: any = {}
	if (tag.type == 'creditCode') {
		query = {
			serviceOrgIdList: [tag.value],
		}
	} else if (tag.type == 'soleValue') {
		query = {
			serviceFacilityIdList: [tag.value],
		}
	} else if (tag.type == 'uniqueValue') {
		query = {
			serviceOrgHomeIdList: [tag.value],
		}
	}
	save(query)
}

const onSelectCheck = (arr, data) => {
	console.log(arr, data, 'arr,data')
	orgList.value = arr
}

const onSelectionChange = (arr) => {
	const afterDawta = arr.map((item) => {
		return {
			label: item.organizationName,
			value: item.id,
		}
	})
	orgList.value = [...new Set([...beforeData, ...afterDawta])]
}

const onSubmit = (form, done) => {
	const _getData = (type) => orgList.value.filter((item) => item.type == type).map((item) => item.value)
	const serviceOrgIdList = _getData('creditCode')
	const serviceFacilityIdList = _getData('soleValue')
	const serviceOrgHomeIdList = _getData('uniqueValue')
	save(
		{
			...form,
			serviceOrgIdList,
			serviceFacilityIdList,
			serviceOrgHomeIdList,
		},
		true
	)
	done && done()
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped>
.content {
	margin: 0 auto;
	width: 80%;
}
</style>
